<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="80" ref="user" :model="user" :rules="ruleCustom">
			<FormItem class="w-50" label="账户名">
				<Input v-model="user.account" placeholder="请输入用户的账户"></Input>
			</FormItem>
			<FormItem class="w-50" label="密码" prop="password">
				<Input type="password" v-model="user.password" placeholder="请输入密码"></Input>
			</FormItem>
			<Form-item class="w-50" label="确认密码" prop="confirmPassword">
				<Input type="password" v-model="user.confirmPassword" placeholder="请确认密码"></Input>
			</Form-item>
			<FormItem class="w-50" label="员工姓名">
				<Input v-model="user.userInfoName" placeholder="请确认员工姓名"></Input>
			</FormItem>
			<FormItem class="w-50" label="职位:">
				<Select class="w-100" v-model="user.positionId" clearable placeholder="请选择职位" @on-change="getParent()">
					<Option v-for=" item in positions" :key="item.positionId" :value="item.positionId">
						{{item.positionName}}
					</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="工资等级:">
				<Select class="w-100" v-model="user.salaryLevelId" clearable placeholder="请选择工资等级">
					<Option v-for=" item in salarys" :key="item.salasalaryLevelId" :value="item.salaryLevelId">
						{{item.salaryLevelId}}
					</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="直属领导:">
				<Select class="w-100" v-model="user.parentId" clearable placeholder="请选择直属领导">
					<Option v-for=" item in parents" :key="item.userId" :value="item.userId">{{item.userName}}</Option>
				</Select>
			</FormItem>
			<FormItem class="w-50" label="手机号" prop="tel">
				<Input v-model="user.tel" placeholder="请输入用户的手机号"></Input>
			</FormItem>
			<FormItem class="w-50" label="身份证号" prop="secId">
				<Input v-model="user.secId" placeholder="请输入用户的身份证号"></Input>
			</FormItem>
			<FormItem class="" label="角色">
				<Radio-group v-model="user.role">
					<Radio v-for="(item,index) in roles" :key="item.roleId" :label="item.roleId">{{item.roleName}}
					</Radio>
				</Radio-group>
			</FormItem>
			<FormItem class="text-right">
				<Button @click="save(user)" type="primary">提交</Button>
				<Button @click="cancel" class="ml-2">取消</Button>
			</FormItem>
		</Form>
	</Layout>
</template>

<script>
	export default {
		data() {
			const validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.user.confirmPassword !== '') {
						this.$refs.user.validateField('confirmPassword');
					}
					callback();
				}
			};
			const validatePassCheck = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.user.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				allPermissions: [],
				user: {
					account: "",
					password: "",
					tel: "",   //手机号
					secId: "",  //身份证号
					confirmPassword: "",
					role: "",
					positionId: "",
					salaryLevelId: "",
					userId: "",
					parentId: "",
					userInfoName: ""
				},
				roles: [],
				positions: [],
				salarys: [],
				parents: [],
				ruleCustom: {
					password: [
						{ required: true, message: '请填写密码', trigger: 'blur' },
						{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
						{ validator: validatePass, trigger: 'blur' }
					],
					confirmPassword: [
						{ required: true, message: '请填写密码', trigger: 'blur' },
						{ type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' },
						{ validator: validatePassCheck, trigger: 'blur' }
					],
					// tel: [
					// 	{ required: true, message: '请填写手机号', trigger: 'blur' },
					// 	{ type: 'string', min: 11, message: '长度不能小于11位', trigger: 'blur' },
					// ],
					secId: [
						{ required: true, message: '请填写身份证号', trigger: 'blur' },
						{ type: 'string', min: 18, message: '长度不能小于18位', trigger: 'blur' },
					],
				}
			}
		},
		created: function() {
			this.getAllRole();
			// this.getParent();
			this.getPosition();
			this.getSalary();

		},
		methods: {
			getPosition: function() {
				this.http.get({
					url: "/position/info/all",
					param: {}
				}).then(data => {
					this.positions = data
				});
			},
			getSalary: function() {
				this.http.get({
					url: "/salary_level/info/all",
					param: {}
				}).then(data => {
					this.salarys = data;
				});
			},
			getParent: function() {
				this.http.get({
					url: "/user_info/info/all",
					param: {
						positionId: this.user.positionId,
					}
				}).then(data => {
					this.parents = data.user_info;
				});
			},

			getAllRole: function() {
				this.http.get({
					url: "/role/all",
					param: {}
				}).then(data => {
					this.$data.roles = data;
				});
			},

			save: function(user) {
				//电话正则
				const reg =/^[1][3-9][0-9]{9}$/;
				if (!this.util.isRealNum(this.user.tel)) {
					this.message.error("联系电话必须输入");
					return;
				}
				if(!reg.test(this.user.tel)){
					this.message.error("电话号码不符合规范");
					return;
				}
				let self = this;
				let roles = [];
				roles.push(this.$data.user.role + "");
				this.$data.user.roles = JSON.stringify(roles);
				delete this.$data.user.role;
				this.http.post({
					url: "/user/info",
					param: {
						account: this.user.account,
						password: this.user.password,
						tel: this.user.tel,
						secId: this.user.secId,
						confirmPassword: this.user.confirmPassword,
						roles: this.$data.user.roles,
						positionId: this.user.positionId,
						salaryLevelId: this.user.salaryLevelId,
						parentId: this.user.parentId,
						userInfoName: this.user.userInfoName,
					}
				}).then(data => {
					if (this.user.password == this.user.confirmPassword) {
						this.$Message.success('提交成功!');
						this.$tabs.close();
					} else {
						this.$Message.error('提交失败!');
					}
					return;
				});
			},

			submit: function() {
				this.http.get({
					url: "/user/account/list",
					param: {
						account: this.user.account
					}
				}).then(date => {
					if (date.length > 0) {
						this.message.error("用户名重复");
						return;
					} else {
						if (this.$data.user.account.length === 0) {
							this.message.error("账户名必须输入");
							return;
						}

						if (this.$data.user.password.length === 0) {
							this.message.error("密码必须输入");
							return;
						}

						if (this.$data.user.password !== this.$data.user.confirmPassword) {
							this.message.error("确认密码必须一致");
							return;
						}

						if (this.$data.user.tel.length === 0) {
							this.message.error("手机号必须输入");
							return;
						}

						if (this.$data.user.secId.length === 0) {
							this.message.error("身份证必须输入");
							return;
						}

						if (this.$data.user.role.length === 0) {
							this.message.error("角色必须选择");
							return;
						}
						let self = this;
						let roles = [];
						roles.push(this.$data.user.role + "");
						this.$data.user.roles = JSON.stringify(roles);
						delete this.$data.user.role;
						this.http.post({
							url: "/user/info",
							param: this.$data.user
						}).then(data => {
							self.message.info("新增成功");
							this.$tabs.close();
						});
					}
				});
			},
			cancel: function() {
				this.$tabs.close();
			}
		}
	}
</script>

<style>
</style>
